<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
    <script src="../libs/dat.gui.min.js" type="text/javascript"></script>
    <link href="../css/dat-gui-light-style.css" rel="stylesheet"/>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>PointsMaterial</h1>
    <p>Configures appearance of point clouds.</p>
    <h3>Customize PointsMaterial</h3>
    <div id="myDatGuiContainer"></div>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/model/SceneModel.js~SceneModel.html"
               target="_other">SceneModel</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PointsMaterial.js~PointsMaterial.html"
               target="_other">PointsMaterial</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {Viewer, SceneModel} from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.camera.eye = [-9146.27, 4094.80, 2752.23];
    viewer.camera.look = [-0.00, -0.042, -0.03];
    viewer.camera.up = [0.37, 0.91, -0.11];

    const cameraControl = viewer.cameraControl;
    cameraControl.navMode = "orbit";
    cameraControl.followPointer = true;

    viewer.camera.ortho.far = 1500000;
    viewer.camera.perspective.far = 1500000;

    // viewer.camera.projection="ortho";
    viewer.camera.projection = "perspective";

    //------------------------------------------------------------------------------------------------------------------
    // Configure points material
    //------------------------------------------------------------------------------------------------------------------

    viewer.scene.pointsMaterial.pointSize = 3;
    viewer.scene.pointsMaterial.roundPoints = true;
    viewer.scene.pointsMaterial.perspectivePoints = true;
    viewer.scene.pointsMaterial.minPerspectivePointSize = 3;
    viewer.scene.pointsMaterial.maxPerspectivePointSize = 10;

    //------------------------------------------------------------------------------------------------------------------
    // Create a SceneModel containing a randomly-generated point cloud
    //------------------------------------------------------------------------------------------------------------------

    const vboSceneModel = new SceneModel(viewer.scene, {
        id: "table",
        isModel: true // <--------------------- Represents a model, registers SceneModel by ID on viewer.scene.models
    });

    const positions = [];
    const colors = [];

    const map = {};

    for (let i = 0; i < 20000;) {

        const x = (Math.random() * 2000) - 1000;
        const y = (Math.random() * 2000) - 1000;
        const z = (Math.random() * 2000) - 1000;

        const hash = "" + x + "." + y + "." + z;
        if (map[hash]) {
            continue;
        }

        map[hash] = true;

        positions.push(x);
        positions.push(y);
        positions.push(z);

        colors.push(Math.random());
        colors.push(Math.random());
        colors.push(Math.random());

        i++;
    }

    vboSceneModel.createMesh({
        id: "pointsMesh",
        primitive: "points",
        positions: positions,
        colors: colors
    });

    vboSceneModel.createEntity({
        id: "points",
        meshIds: ["pointsMesh"]
    });

    vboSceneModel.finalize();

    //------------------------------------------------------------------------------------------------------------------
    // GUI to play with points material properties
    //------------------------------------------------------------------------------------------------------------------

    const pointsMaterial = viewer.scene.pointsMaterial;
    const camera = viewer.camera;

    var guiParams = new function () {
        this.roundPoints = pointsMaterial.roundPoints;
        this.perspectivePoints = pointsMaterial.perspectivePoints;
        this.pointSize = pointsMaterial.pointSize;
        this.minPerspectivePointSize = pointsMaterial.minPerspectivePointSize;
        this.maxPerspectivePointSize = pointsMaterial.maxPerspectivePointSize;
        this.perspective = (camera.projection === "perspective");
    }();

    var update = function () {
        pointsMaterial.roundPoints = guiParams.roundPoints;
        pointsMaterial.perspectivePoints = guiParams.perspectivePoints;
        pointsMaterial.pointSize = guiParams.pointSize;
        pointsMaterial.minPerspectivePointSize = guiParams.minPerspectivePointSize;
        pointsMaterial.maxPerspectivePointSize = guiParams.maxPerspectivePointSize;
        camera.projection = guiParams.perspective ? "perspective" : "ortho";
        requestAnimationFrame(update);
    };

    update();

    const gui = new dat.GUI({autoPlace: false, width: "100%"});

    const pointsMaterialFolder = gui.addFolder('PointsMaterial');
    pointsMaterialFolder.add(guiParams, 'roundPoints');
    pointsMaterialFolder.add(guiParams, 'perspectivePoints');
    pointsMaterialFolder.add(guiParams, 'pointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'minPerspectivePointSize', 1, 50);
    pointsMaterialFolder.add(guiParams, 'maxPerspectivePointSize', 1, 50);
    pointsMaterialFolder.open();

    const cameraFolder = gui.addFolder('Camera');
    cameraFolder.add(guiParams, 'perspective');
    cameraFolder.open();

    var customContainer = document.getElementById('myDatGuiContainer');
    customContainer.appendChild(gui.domElement);

    window.viewer = viewer;

</script>
</html>